<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://cdn.bootcss.com/echarts/3.5.4/echarts.min.js"></script>
    <script type="text/javascript" src="line-data.js"></script>
    <title>文章行块密度</title>
</head>
<body>
	<h1>文章行块密度</h1>
    <div id="main" style="width: 100%;height:800px;"></div>
    <div>从<input type="text" value="0" id="line_from">到<input type="text" value="10" id="line_to">行<input type="button" value="显示" id="show_trigger"></div>
    <div id="text">
    	
    </div>
    <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    var getOption = function(fn){
    	var xarr = [];
	    for(var i=0; i<blocks.length; i++){
	    	xarr.push(i);
	    }

		 return option = {
		        title: {
		            text: '行块文字密度'
		        },
		        tooltip: {},
		        xAxis: {
		        	name: '行数',
		        	type: 'category',
		            data: xarr
		        },
		        yAxis: {
		        	name : '字数'
		        },
		        series: [{
			            name: '单行字数',
			            type: 'bar',
			            data: blocks_length
			        	},
			        	{
			            name: '行块字数',
			            type: 'line',
			            data: blocks_score
			        	}
		        	]
		    };
    }
    myChart.setOption(getOption());
    document.getElementById('line_from').value = position[0];
    document.getElementById('line_to').value = position[1];
    document.getElementById('show_trigger').addEventListener('click',function(){
    	var line_from = parseInt(document.getElementById('line_from').value);
    	var line_to = parseInt(document.getElementById('line_to').value);
    	document.getElementById('text').innerHTML = blocks.slice(line_from,line_to).join('<br/>');
    },false);
    </script>
</body>
</html>